﻿<div class="col-md-3 col-xl-2 bd-sidebar">

    <button class="btn bd-search-docs-toggle d-md-none p-0 mt-3 mb-3 collapsed" type="button" data-toggle="collapse" @onclick="@(_ => Collased = !Collased)"
            data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
            <title>Menu</title>
            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
        </svg>
    </button>

    <nav class="collapse bd-links @(Collased ? "" : "show")" aria-label="Main navigation">
        <div class="bd-toc-item active">
            <a class="bd-toc-link" href="/">
                Examples
            </a>

            <ul class="nav bd-sidenav">
                <NavLink href="/" Match="NavLinkMatch.All">Quick start</NavLink>
                <NavLink href="/positioning">Positioning</NavLink>
                <NavLink href="/handleEvents">Handle events</NavLink>
                <NavLink href="/single">Single date picker</NavLink>
                <NavLink href="/predefinedRanges">Predefined date ranges</NavLink>
                <NavLink href="/localization">Localization</NavLink>
                <NavLink href="/inline">Inline mode</NavLink>
                <NavLink href="/limits">Limits</NavLink>
                <NavLink href="/disable">Disable dates</NavLink>
                <NavLink href="/highlight">Highlight dates</NavLink>
                <NavLink href="/customInput">Custom input layout</NavLink>
                <NavLink href="/customDay">Custom day layout</NavLink>
                <NavLink href="/customButtons">Custom buttons layout</NavLink>
                <NavLink href="/customClickHandler">Custom click handler</NavLink>
                <NavLink href="/bothSidesSelection">Both sides selection</NavLink>
                <NavLink href="/form">Form</NavLink>
                <NavLink href="/time">Time</NavLink>
                <NavLink href="/container">DOM Container</NavLink>
            </ul>
        </div>
    </nav>

</div>

@code{
    private bool Collased { get; set; } = true;
}